import React from 'react';
import Box from "@material-ui/core/Box";
import AppBar from "@material-ui/core/AppBar";
import Toolbar from "@material-ui/core/Toolbar";
import Typography from "@material-ui/core/Typography";
import MessageIcon from '@mui/icons-material/Message';
import AddchartIcon from '@mui/icons-material/Addchart';
import AccountBoxIcon from '@mui/icons-material/AccountBox';
import {makeStyles} from "@material-ui/core/styles";

import SvgIcon from "@material-ui/core/SvgIcon";
import Button from "@material-ui/core/Button";
import Card from "@material-ui/core/Card";
import CardActionArea from "@material-ui/core/CardActionArea";
import CardMedia from "@material-ui/core/CardMedia";
import CardContent from "@material-ui/core/CardContent";
import Router from "next/router";

function Functions() {
    const useStyles = makeStyles({
        logincard: {
            position: "relative",
            display: "flex",
            flexDirection: "column",
            alignItems: "center",
            justifyContent: "center",
            margin: "0 auto",
            width: 700,
            height: 748,
            borderRadius: 25,
            backgroundColor: "transparent",
            boxShadow: "rgb(34 34 34 / 10%) 0px 8px 22px 6px",
            border: "1px solid rgba(225, 225, 225, 0)"
        },
        loginLogo: {
            height: 160,
            width: 160
        },
        container:{
            maxWidth: "100%",
        },
        functionContainer:{
            width: "100%",
            display: "flex",
        },
        leftSelectBox:{
            height: 648,
            width: "14%",
        },
        centralFunctionBox:{
            //backgroundColor: "rgba(158,0,255)",
            //border: "2px solid rgba(158,0,255)",
            height: 648,
            width: "86%",
        }

    });
    const styles = useStyles();


    return (
        <div>
            {/*导航栏*/}
            <div className={styles.container}>
                {TopBar()}
            </div>
            <div className={styles.functionContainer}>
                {/*左侧功能导航栏*/}
                <Box className={styles.leftSelectBox}>
                    {leftSelectBar()}
                </Box>
                <div className={styles.centralFunctionBox}>
                    {CentralFunction()}
                </div>
            </div>
        </div>
    );
}

function TopBar() {
    const [auth, setAuth] = React.useState(true);
    const [anchorEl, setAnchorEl] = React.useState(null);

    const handleMenu = (event) => {
        setAnchorEl(event.currentTarget);
    };

    const handleClose = () => {
        setAnchorEl(null);
    };
    return (
        <Box sx={{ flexGrow: 1 }}>
            <AppBar position="static">
                <Toolbar>
                    <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
                       Gulu 仪表盘
                    </Typography>
                </Toolbar>
            </AppBar>
        </Box>
    );
}


function leftSelectBar() {
    const leftStyles = makeStyles({
        leftOutsideContainer:{
            //border: "2px solid rgba(255,255,255)",
            //backgroundColor: "#3F51B5",
            backgroundColor: "#FFFFFF",
            paddingTop: 100,
            paddingBottom: 100,
            width: "100%",
            height: 448,
            marginTop:10
        },
        leftItemStyle:{
            border: "1px solid #AEAEAE",
            borderRadius: 10,
            marginTop: 30,
            width: 160,
            marginLeft: 15,
            height: 40,
            backgroundColor: "#FFFFFF",
            display: "flex",
            /*实现垂直居中*/
            alignItems: "center",
            /*实现水平居中*/
            justifyContent: "center",
            fontWeight:"bold"
        }
    });
    const leftStyle = leftStyles();

    function toIndex() {
        Router.push('/')
    }
    function toMessage() {
        console.log('toMessage')
    }
    function toFunctions() {
        Router.push('/functions')
    }
    function toMy() {
        console.log("toMy")
    }

    return (
        <Box className={leftStyle.leftOutsideContainer}>
            <div className={leftStyle.leftItemStyle}>
                <Button variant="text" style={{width:"100%", fontWeight:"bold"}} onClick={toIndex}>
                    <HomeIcon style={{marginRight:15}} /><span>首页</span>
                </Button>
            </div>
            <div className={leftStyle.leftItemStyle}>
                <Button variant="text" style={{width:"100%", fontWeight:"bold"}} onClick={toMessage}>
                    <MessageIcon style={{marginRight:15}} />消息
                </Button>
            </div>
            <div className={leftStyle.leftItemStyle}>
                <Button variant="text" style={{width:"100%", fontWeight:"bold"}} >
                    <AddchartIcon style={{marginRight:15}} />功能
                </Button>
            </div>
            <div className={leftStyle.leftItemStyle}>
                <Button variant="text" style={{width:"100%", fontWeight:"bold"}} onClick={toMy}>
                    <AccountBoxIcon style={{marginRight:15}} /> 我的
                </Button>
            </div>
        </Box>
    );
}

function HomeIcon(props) {
    return (
        <SvgIcon {...props}>
            <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" />
        </SvgIcon>
    );
}

function CentralFunction() {
    const centralStyles = makeStyles({
        centralContainer:{
            //border: "2px solid #00D2DC",
            width: "100%",
            height: "100%",
        },
        functionBox:{
            width: "48%",
            height: "100%",
            //border: "3px solid #000505",
            marginLeft: 12,
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            paddingLeft:75,
            paddingRight:75
        }
    });
    const cStyle = centralStyles();
    return (
        <Box className={cStyle.centralContainer}>
            <Box style={{width:"100%", height:"50%", display:"flex"}}>
                <Box className={cStyle.functionBox}>
                    <Card sx={{ maxWidth: 345 }}>
                        <CardActionArea>
                            <CardMedia
                                component="img"
                                height="140"
                                image="/static/brain2.png"
                                alt="green iguana"/>
                            <CardContent>
                                <Typography gutterBottom variant="h5" component="div">
                                    脑电监测 EEG monitoring
                                </Typography>
                                <Typography variant="body2" color="textSecondary">
                                    Design of EEG Signals Acquisition and Processing System. An EEG signal analyzing system-use of the theory of wavelet analysis.
                                </Typography>
                            </CardContent>
                        </CardActionArea>
                    </Card>
                </Box>
                <Box className={cStyle.functionBox}>
                    <Card sx={{ maxWidth: 345 }}>
                        <CardActionArea>
                            <CardMedia
                                component="img"
                                height="140"
                                image="/static/sign.png"
                                alt="green iguana"/>
                            <CardContent>
                                <Typography gutterBottom variant="h5" component="div">
                                    体征监测 Sign monitoring
                                </Typography>
                                <Typography variant="body2" color="textSecondary">
                                    The designing is come true successfully, reducing hospital cost dramatically, reducing working capacity of nurses to some extent.
                                </Typography>
                            </CardContent>
                        </CardActionArea>
                    </Card>
                </Box>
            </Box>
            <Box style={{width:"100%", height:"50%", display:"flex"}}>
                <Box className={cStyle.functionBox}>
                    <Card sx={{ maxWidth: 345 }}>
                        <CardActionArea>
                            <CardMedia
                                component="img"
                                height="140"
                                image="/static/reality.jpg"
                                alt="green iguana"/>
                            <CardContent>
                                <Typography gutterBottom variant="h5" component="div">
                                    虚拟现实康复 VR rehabilitation
                                </Typography>
                                <Typography variant="body2" color="textSecondary">
                                    This device helps make virtual reality a more usable and accessible technology. You should definitely check it out.
                                </Typography>
                            </CardContent>
                        </CardActionArea>
                    </Card>
                </Box>
                <Box className={cStyle.functionBox}>
                    <Card sx={{ maxWidth: 345 }} onClick={()=>{Router.push('/stethoscope')}}>
                        <CardActionArea>
                            <CardMedia
                                component="img"
                                height="140"
                                image="/static/wireless.png"
                                alt="green iguana"/>
                            <CardContent>
                                <Typography gutterBottom variant="h5" component="div">
                                    无线听诊器 Wireless stethoscope
                                </Typography>
                                <Typography variant="body2" color="textSecondary">
                                    Development of the Monitoring Software of Electronic Stethoscope Based on Wireless Instruments.
                                </Typography>
                            </CardContent>
                        </CardActionArea>
                    </Card>
                </Box>
            </Box>
        </Box>
    );
}


export default Functions;